<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>熊猫优选-首页</title>
    <!-- 引入默认样式 -->
    <link rel="stylesheet" href="../css/reset.css">
    <!-- 引入iconfont -->
    <link rel="stylesheet" href="../css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/iconfont/carts/iconfont.css">
    <!-- 引入公用样式 -->
    <link rel="stylesheet" href="../css/comment.css">
    <!-- swiper -->
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <!-- 引入页面css -->
    <link rel="stylesheet" href="../css/index.css">
</head>

<body>
    <!-- 顶部 -->
    <div id="top">
        <div class="container clearFix">
            <div class="login fl">
                <span>你好，</span>
                <a class="hidden" href="./login.html">请登录</a>
                <span class="username"></span>
                <span class="logout">退出登录</span>
            </div>
            <div class="carts fr">
                <div class="loginHide">请登陆后使用购物车</div>
                <div class="tocarts">
                    <span class="iconfont icon-gouwuche"></span>
                    <span>购物车</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 头部 -->
    <div id="head" class="container clearFix">
        <!-- logo -->
        <div class="logo clearFix fl">
            <img src="../static/image/icon.png" alt="" class="fl">
            <div class="logoText fr">
                <h3>熊猫优选</h3>
                <span>XIONG MAO YOU XUAN</span>
            </div>
        </div>
        <!-- 搜索框 -->
        <div class="search fl">
            <span class="iconfont icon-sousuo"></span>
            <input type="text" placeholder="搜索商品,发现更多优惠">
            <button type="button">搜索</button>
        </div>
        <!-- 包邮&退换&品质保证 -->
        <div class="right fr clearFix">
            <div>
                <span class="iconfont icon-99yuanbaoyou"></span>
                <p>全程包邮</p>
            </div>
            <div>
                <span class="iconfont icon-tuihuanhuo"></span>
                <p>7天退换</span>
            </div>
            <div>
                <span class="iconfont icon-pinzhibaozhang"></span>
                <p>品质保证</span>
            </div>
        </div>
    </div>
    <!-- 内容区域 -->
    <div id="content">
        <!-- 导航栏 -->
        <div id="nav">
            <!-- 选项列表 -->
            <ul class="container clearFix">
                <li data-index="0" class="active">首页</li>
                <li data-index="1"><a href="../99.html" target="content"></a> 9块9包邮</li>
                <li data-index="2">超值大额券</li>
                <li data-index="3">降温急救穿搭</li>
            </ul>
        </div>
        <ol>
            <!-- 首页 -->
            <li class="index on" id="index">
                <!-- 轮播 -->
                <div id="banner" class="container clearFix">
                    <!-- 商品目录 -->
                    <div class="leftList fl">
                        <ul>
                            <!-- 女装/女鞋 -->
                            <li>
                                <span class="iconfont icon-nvzhuang"></span><a href="#">女装</a>/<a href="#">女鞋</a>
                                <div class="sub">
                                    <div class="title">
                                        <h5>女装</h5>
                                        <div class="item">
                                            <a href="#">衬衫</a>
                                            <a href="#">裤装</a>
                                        </div>
                                    </div>
                                    <div class="title">
                                        <h5>女鞋</h5>
                                        <div class="item">
                                            <a href="#">帆布鞋</a>
                                            <a href="#">高跟鞋</a>
                                            <a href="#">皮鞋</a>
                                            <a href="#">单鞋</a>
                                            <a href="#">小白鞋</a>
                                            <a href="#">运动鞋</a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <!-- 男装/男鞋 -->
                            <li>
                                <span class="iconfont icon-nanxie"></span><a href="#">男装</a>/<a href="#">男鞋</a>
                            </li>
                            <li>
                                <span class="iconfont icon-meizhuang"></span><a href="#">美妆</a>/<a href="#">个护</a>
                            </li>
                            <li><span class="iconfont icon-xiexiangbao"></span><a href="#">配饰</a>/<a href="#">箱包</a>
                            </li>
                            <li><span class="iconfont icon-lingshi"></span><a href="#">零食王国</a></li>
                            <li><span class="iconfont icon-muying"></span><a href="#">母婴用品</a></li>
                            <li><span class="iconfont icon-shouji"></span><a href="#">手机</a>/<a href="#">数码</a></li>
                            <li><span class="iconfont icon-neiyi"></span><a href="#">内衣袜子</a></li>
                            <li><span class="iconfont icon-jiaju"></span><a href="#">文娱</a>/<a href="#">家居</a></li>
                        </ul>
                        <div class="listHidden">
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <div class="right fr">
                        <!-- 轮播图 -->
                        <div class="swipper fl">
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                </div>
                                <!-- 如果需要分页器 -->
                                <div class="swiper-pagination"></div>
                                <!-- 如果需要导航按钮 -->
                                <div class="swiper-button-prev"></div>
                                <div class="swiper-button-next"></div>
                            </div>
                        </div>
                        <!-- 九块九包邮 -->
                        <div class="topRight fr">
                            <p>9块9包邮</p>
                            <img src="../static/image/top_right.png" class="tag" alt="">
                            <span>保你不吃亏</span>
                            <img src="../static/image/banner_top_right.gif" class="gif" alt="">
                        </div>
                        <!-- 降温急救/超值大额券/扫码 -->
                        <div class="bottomRight clearFix">
                            <div class="item">
                                <div class="text fl">
                                    <h3>降温急救穿搭</h3>
                                    <P>速来抢购~</P>
                                    <div>GO</div>
                                </div>
                                <img src="../static/image/bottom1.png" alt="">
                            </div>
                            <div class="item">
                                <div class="text fl">
                                    <h3>超值大额券</h3>
                                    <P>优惠直击低价~</P>
                                    <div>GO</div>
                                </div>
                                <img src="../static/image/bottom2.png" alt="">
                            </div>
                            <div class="item">
                                <div class="textQR fl">
                                    <P>扫码下载APP</P>
                                    <P>发现更多惊喜</P>
                                </div>
                                <img src="../static/image/qr.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 内容 -->
                <div id="items" class="container clearFix">
                    <!-- 小编精选 -->
                    <div class="title">
                        <span>小编精选</span>
                        <span>每日更新</span>
                    </div>
                    <div class="itemList listIndex clearFix"></div>
                    <div class="itemList listSearch clearFix" id="search"></div>
                </div>
                <!-- 查看更多 -->
                <div id="moreBtn" class="container">
                    <button name="moreButton" class="indexBtn" type="button">查看更多</button>
                    <p class="loding">正在加载中...</p>
                </div>
            </li>
            <!-- 9块9包邮 -->
            <li class="joyou" id="joyou">
                <!-- 内容 -->
                <div id="items" class="container clearFix">
                    <!-- 9块9专区 -->
                    <div class="channel">
                        <span>9块9专区</span>
                    </div>
                    <!-- 小编精选 -->
                    <div class="titleJoyou">
                        <ul></ul>
                    </div>
                    <div class="itemList listJoyou clearFix">
                    </div>
                </div>
                <!-- 查看更多 -->
                <div id="moreBtn" class="container">
                    <button name="moreButton" class="joyouBtn" type="button">查看更多</button>
                    <p class="loding">正在加载中...</p>
                </div>
            </li>
            <!-- 大额优惠券 -->
            <li class="coupon" id="coupon">
                <!-- 内容 -->
                <div id="items" class="container clearFix">
                    <div class="channel">
                        <span>超值大额优惠券</span>
                    </div>
                    <!-- 小编精选 -->
                    <div class="titleCoupon">
                        <ul></ul>
                    </div>
                    <div class="itemList listCoupon clearFix">
                    </div>
                </div>
                <!-- 查看更多 -->
                <div id="moreBtn" class="container">
                    <button name="moreButton" type="button">查看更多</button>
                    <p class="loding">正在加载中...</p>
                </div>
            </li>
            <!-- 降温急救穿搭 -->
            <li class="fashion" id="fashion">
                <!-- 内容 -->
                <div id="items" class="container clearFix">
                    <!-- 人气女装上新 -->
                    <div class="channel">
                        <span>人气女装上新</span>
                    </div>
                    <div class="itemList listFashion clearFix">
                    </div>
                </div>
                <!-- 查看更多 -->
                <div id="moreBtn" class="container">
                    <button name="moreButton" type="button">查看更多</button>
                </div>
            </li>
        </ol>
    </div>
    <!-- 页脚 -->
    <div id="fotter">
        <div class="container clearFix">
            <div class="appDownload fl">
                <img src="../static/image/icon.png" alt="">
            </div>
            <div class="appText fl">
                <h2>熊猫优选</h2>
                <p>年轻人网购首选</p>
                <p>购物领券更省钱</p>
            </div>
            <div class="downloadLink">
                <span>|</span>
                <span><a href="#">下载APP</a></span>
            </div>
        </div>
    </div>
    <!-- 返回顶部 -->
    <div id="toTop">
        <a href="#">
            <span class="iconfont icon-xiangshangjiantou"></span>
            <p>顶部</p>
        </a>
    </div>
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/util.js"></script>
    <script src="../js/swiper-bundle.min.js"></script>
    <script src="../js/isLogin.js"></script>
    <script src="../js/index.js"></script>
</body>

</html>